<template>
  <!--  综合监管态势  -->
  <div class="main_center column-flex">
    <!--    <EventLevel :data="topData"></EventLevel>-->
    <RegulatoryEvents
      style="height: 16%; align-items: flex-start"
      :data="topData"
      @handleImgItems="handleImgItems"
    ></RegulatoryEvents>
    <div class="center-middle">
      <!--    拓扑图   -->
      <div class="center-middle-cont">
        <TopoContent
          :topoData="TopologyData"
          @handleCount="handleCount"
        ></TopoContent>
      </div>
    </div>
    <div class="center-bottom flex">
      <div class="box center-bottom-l">
        <h1 class="left-title">事件统计</h1>
        <div class="center-bottom-l-cont">
          <PieEcharts
            ref="pieRef"
            style="width: 60%; height: 100%"
            @handlePieClick="handlePieClick"
          ></PieEcharts>
          <div class="pieList">
            <div class="pielist-item" v-for="(item, index) in pieData">
              <i :class="['pie-icon-' + index]"></i>
              <span class="pielist-title">{{ item.name }}</span>
              <span :title="item.count">{{ item.count ? (item.count>999?'999+':item.count) : 0 }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box center-bottom-r">
        <h1 class="left-title">异常资产排名</h1>
        <el-radio-group class="left-title-btn" v-model="views" size="mini">
          <el-radio-button label="0">异常资产</el-radio-button>
          <el-radio-button label="1">违规人员</el-radio-button>
        </el-radio-group>
        <div
          class="flex"
          style="
            margin-top: 1.4rem;
            width: 100%;
            height: calc(100% - 3.4rem);
            overflow: hidden;
          "
          @mouseover="handleMouseover"
          @mouseleave="handleMouseLeave"
        >
          <CycleComponent
            v-if="isAnimate && views == 0"
            :time="anomalyRankingData.length < 5 ? 0 : 15"
            :paused="anomalyRankingData.length < 5"
            style="width: 100%"
          >
            <AnomalyRanking
              style="width: 100%"
              class="left-content"
              :total="eventTotal"
              :data="anomalyRankingData"
            ></AnomalyRanking>
          </CycleComponent>
          <CycleComponent
            v-if="isAnimate && views == 1"
            :time="rankingData.length < 5 ? 0 : 10"
            :paused="rankingData.length < 5"
            style="width: 100%"
          >
            <ranking
              style="width: 100%"
              class="left-content"
              :total="peopleTotal"
              :data="rankingData"
            ></ranking>
          </CycleComponent>
        </div>
      </div>
    </div>
    <!--    安全域   -->
    <searchDialog
      ref="dialogRef"
      title="事件列表"
      :searchFormObj="imgFormObj"
      :tableList="imgTableData.imgTableList"
      :tableData="imgTableData.tableData"
      :total="imgTableData.total"
      :operate-open="true"
      @getTableList="getsafeConcernTableList"
      @operateEvent="operateEvent"
    ></searchDialog>
  </div>
</template>

<script>
import RegulatoryEvents from "@/components/common/RegulatoryEvents.vue";
import HandlingEvents from "@/components/common/HandlingEvents";
import PieEcharts from "@/components/echarts/comprehensiveSituation/PieEcharts";
import AnomalyRanking from "@/components/common/AnomalyRanking";
import ranking from "@/components/common/Ranking";
import CycleComponent from "@/components/common/cycleComponent.vue";
import TopoContent from "@/components/index/comprehensiveSituation/components/TopoContent";
import {
  safetySituation,
  levelCategory,
  abnormalAssets,
  abnormalUser,
  securityDomainTopology,
} from "@/api/comprehensiveSituation";
import searchDialog from "@/components/common/searchDialog";
import { cloneDeep } from "@/utils/loadash-es";
import obj from "@/components/index/comprehensiveSituation/components/tableData";
import { mapState } from "vuex";
import { parseTime } from "@/utils/hongke";
import { eventList } from "@/api/confidentialitySupervision";
// import Obj from "@/components/index/assetSituation/components/tableData";
export default {
  components: {
    RegulatoryEvents,
    HandlingEvents,
    PieEcharts,
    ranking,
    CycleComponent,
    TopoContent,
    AnomalyRanking,
    searchDialog,
  },
  data() {
    return {
      views: "0",
      eventTotal: 500,
      peopleTotal: 0,
      isAnimate: false,
      rankingData: [],
      anomalyRankingData: [],
      // 事件总件数
      topData: {
        title: "监管事件（条）",
        disposalData: [
          { count: 0, name: "已处置", code: "1" },
          { count: 0, name: "总数" },
        ],
        event_category: [
          { normalName: "用户违规", code: "0", disposedCount: 0, count: 0 },
          { normalName: "网络攻击", code: "2", disposedCount: 0, count: 0 },
          { normalName: "运维异常", code: "1", disposedCount: 0, count: 0 },
          { normalName: "设备设施故障", code: "3", disposedCount: 0, count: 0 },
        ],
        event_level: [
          { normalName: "特别重大事件", code: "0", disposedCount: 0, count: 0 },
          { normalName: "较大事件", code: "2", disposedCount: 0, count: 0 },
          { normalName: "重大事件", code: "1", disposedCount: 0, count: 0 },
          { normalName: "一般事件", code: "3", disposedCount: 0, count: 0 },
        ],
      },
      pieData: [
        { name: "网络服务异常", code: "200", count: 0 },
        { name: "用户行为异常", code: "100", count: 0 },
        { name: "管理员行为异常", code: "300", count: 0 },
        { name: "网络边界异常", code: "400", count: 0 },
      ],
      queryParams: {
        searchType: this.$store.state.searchType || "3",
        time:this.$store.state.time
      },
      TopologyData: {},
      imgTableData: {
        imgTableList: cloneDeep(obj.imgTableList),
        tableData: [],
        total: 0,
      },
      timeOut: undefined,
      abnormal_asset_timer: null,
    };
  },
  computed: {
    ...mapState(["searchType",'time']),
    imgFormObj: {
      get() {
        return {
          fieldList: cloneDeep(obj.imgFormObj.fieldList),
          searchData: {},
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            levelCodeList: this.$store.state.levelCodeList,
            categoryCodeList: this.$store.state.categoryCodeList,
            typeCodeList: this.$store.state.typeCodeList,
            protectCodeList: this.$store.state.protectCodeList,
            disposalStatusList: [
              {
                label: "未处置 ",
                value: 0,
              },
              {
                label: "已处置 ",
                value: 1,
              },
            ],
          },
        };
      },
      set() {},
    },
  },
  watch: {
    /* searchType: {
      handler(val) {
        this.queryParams.searchType = val || "3";
        this.getAllData();
        this.isAnimate = false;
      },
      immediate: true,
      deep: true,
    }, */
    time:{
      handler(val) {
        if(val && val[0]){
          this.queryParams.searchType=this.$store.state.searchType!='custom'?this.$store.state.searchType:null;
          if(this.$store.state.searchType!='custom'){
            this.queryParams.time=null
          }else{
            this.queryParams.time=this.$store.state.time
          }
          this.getAllData();
        this.isAnimate = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.dataLoop();
  },
  methods: {
    getAllData() {
      this.getEventCound();
      this.getLevelCategory();
      this.getAbnormalAssets();
      this.getAbnormalUser();
      this.getTopology();
    },
    /** 获取事件统计  */
    getEventCound() {
      safetySituation(this.queryParams).then((res) => {
        let result = [];
        if (res.length > 0) {
          this.pieData = res;
          result = res.map((i) => {
            return {
              code: i.code,
              name: i.name,
              value: i?.count ? i.count : 0,
            };
          });
        } else {
          this.pieData = [
            { name: "网络服务异常", code: "200", count: 0 },
            { name: "用户行为异常", code: "100", count: 0 },
            { name: "管理员行为异常", code: "300", count: 0 },
            { name: "网络边界异常", code: "400", count: 0 },
            { name: "管理配置违规", code: "500", count: 0 },
          ];
        }
        this.$refs.pieRef.getData(result);
      });
    },
    /** 统计事件级别分类 */
    getLevelCategory() {
      levelCategory(this.queryParams).then((res) => {
        this.topData.disposalData[0].count = res.totalDisposed;
        this.topData.disposalData[1].count = res.total;
        res.TagCountGroupVos.forEach((i) => {
          if (i.normalGroupCode == "event_category") {
            this.topData.event_category = i.children;
          } else if (i.normalGroupCode == "event_level") {
            this.topData.event_level = i.children;
          }
        });
      });
    },
    /**  异常资产排名 */
    getAbnormalAssets() {
      abnormalAssets(this.queryParams).then((res) => {
        if (res.length > 0) {
          this.anomalyRankingData = res;
          this.anomalyRankingData.forEach((i) => {
            this.eventTotal += i.eventData;
          });
          this.timeOut = setTimeout(() => {
            this.isAnimate = true;
          }, 100);
        }
      });
    },
    /**  违规人员 */
    getAbnormalUser() {
      abnormalUser(this.queryParams).then((res) => {
        if (res.length > 0) {
          this.rankingData = res;
          this.rankingData.forEach((i) => {
            this.peopleTotal += i.eventTotal;
          });
        }
      });
    },
    /**  安全域 */
    getTopology() {
      securityDomainTopology(this.queryParams).then((res) => {
        this.TopologyData = res;
      });
    },
    handleCount(obj) {
      this.queryEventList({ domainId: obj.id,assetType:obj.type, ...this.queryParams });
      this.imgFormObj.searchData = { domainId: obj.id,assetType:obj.type, ...this.queryParams };
      let _self = this;
      setTimeout(function () {
        _self.$refs.dialogRef.open = true;
      }, 500);
    },
    /** 显示弹窗 */
    handleImgItems(item) {
      this.queryEventList({ ...item, ...this.queryParams });
      this.imgFormObj.searchData = { ...item, ...this.queryParams };
      let _self = this;
      setTimeout(function () {
        _self.$refs.dialogRef.open = true;
      }, 500);
    },
    /** 获取列表值 */
    queryEventList(query) {
      eventList(query).then((res) => {
        this.imgTableData.total = res.total;
        this.imgTableData.tableData = res.list;
      });
    },
    /**  搜索项切换  */
    getsafeConcernTableList(data) {
      if (data?.time) {
        data.time.forEach((i, index) => {
          data.time[index] = parseTime(i, "{y}-{m}-{d}T{h}:{i}:{s}");
        });
      }
      this.queryEventList(data);
    },
    // 点击饼状图
    handlePieClick(params) {
      this.queryEventList({ typeCode: params.data.code, ...this.queryParams });
      this.imgFormObj.searchData = {
        typeCode: params.data.code,
        ...this.queryParams,
      };
      let _self = this;
      setTimeout(function () {
        _self.$refs.dialogRef.open = true;
      }, 500);
    },
    /**  安全域--二级 弹窗详情 */
    operateEvent(val) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + val.row.id
      );
    },
    /** 循环 */
    dataLoop() {
      this.abnormal_asset_timer = setInterval(() => {
        this.views = this.views == "0" ? "1" : "0";
      }, 20000000);
    },
    handleMouseover() {
      clearInterval(this.abnormal_asset_timer);
    },
    handleMouseLeave() {
      this.dataLoop();
    },
  },
  destroyed() {
    clearTimeout(this.timeOut);
    clearInterval(this.abnormal_asset_timer);
  },
};
</script>

<style lang="scss" scoped>
.empty-box {
  height: 100%;
  width: 100%;
}

.center-middle {
  height: 55%;
  margin-top: -1.8rem;
}

.center-bottom {
  height: 30%;
  justify-content: space-between;

  .center-bottom-l {
    height: 100%;
    width: 49%;

    .center-bottom-l-cont {
      display: flex;
      align-items: center;
      width: 100%;
      height: calc(100% - 1rem);

      .pieList {
        width: 40%;

        .pielist-item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 0.5rem 1rem;
          background: rgba(14, 85, 154, 0.3);
          margin-bottom: 0.8rem;
          text-align: left;
          .pielist-title {
            flex: 1;
            margin-left: 5px;
          }

          i {
            display: inline-block;
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 100%;

            &.pie-icon-0 {
              background: #ff5f87;
            }

            &.pie-icon-1 {
              background: #ffc652;
            }

            &.pie-icon-2 {
              background: #2888ff;
            }

            &.pie-icon-3 {
              background: #00dee0;
            }
            &.pie-icon-4{
              background:#ff9f7f;
            }
          }
        }
      }
    }
  }

  .center-bottom-r {
    height: 100%;
    width: 49%;
    position: relative;

    .left-title-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }
  }
}

.center-middle-cont {
  height: calc(100% - 2rem);
  position: relative;
  margin:0 auto;
  //overflow: hidden;
}

::v-deep .header-item {
  width: 14rem;
  height: 3.75rem !important;
  line-height: 3.75rem !important;
}

::v-deep .ceil {
  width: 14rem;
  height: 4rem !important;
  line-height: 4rem !important;
}

::v-deep .row-item {
  height: 4rem !important;
  line-height: 4rem !important;
}

::v-deep {
  .el-radio-button {
    margin-right: 10px;
    // background-image: linear-gradient(
    //   to bottom,
    //   rgba(15, 38, 110, 0.6) 0%,
    //   rgba(26, 101, 174, 0.6) 100%
    // );
    // border: 1px solid rgba(59, 139, 255, 0.6);
  }

  .el-radio-button__inner:hover {
    color: #fff;
  }

  .el-radio-group
    .el-radio-button__orig-radio:checked
    + .el-radio-button__inner {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 140, 164, 0.6) 0%,
      rgba(0, 222, 226, 0.6) 100%
    );

    border-radius: 4px;
  }
}

@media (min-width: 1920px) {
  .center-middle-cont {
    // padding-left: 2rem;
  }
}
</style>
